﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>多级无限级菜单</title>
    <script src="https://www.17sucai.com/preview/1528155/2019-02-14/dh/js/jquery.min.js"></script>
</head>
<body>
    <style type="text/css">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*  主要样式 */
.yyui_menu1 {
  height: 46px;
  line-height: 46px;
  font-size: 15px;
  width: 110px;
  text-align:left;
  border:1px solid #ddd;
  float:left;
        }

.yyui_menu1 li {
    float: left;
    position: relative;
}
/*这一级是导航*/
.yyui_menu1 li a {
    display: block;
    line-height: 46px;
    text-decoration: none;
    min-width: 90px;
    padding-left:20px;
    color: #333333;
}
.more:hover {
    background: #EFEFEF;
}
.yyui_menu1 li ul {
    position: absolute;
    float: left;
    width: 110px;
    border: 1px solid #D2D2D2;
    display: none;
    background-color: #FFFfff;
    z-index: 9999;
}
    /*这是第二级菜单*/
.yyui_menu1 li ul a {
    min-width: 130px;
    float:left;
}
.yyui_menu1 li ul ul {
    top: 0;
    left: 110px;
}
    .audioName {
        width:200px;
    }
    .playAudio {
        background:rgba(42, 130, 228, 1);
        color:#fff;
        width:50px;
        text-align:center;
        float:left;
        border-radius:5px;
        height: 28px;
        line-height: 28px;
        margin-top: 10px;
        font-size: 13px;
        cursor:pointer;
    }
    .playAudio:hover{
            background:rgba(67, 207, 124, 1);
    }
        .videoBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    text-align: center;
    display: none;
}

.closeVideo {
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding: 5px;
    cursor: pointer;
}

#schemeVideo {
    width: 1400px;
    height: 630px;
    margin: 0px auto;
    background-color: #000;
    padding-bottom: 10px;
}
#video-list {
  height: 630px;
   width:1100px;
  margin:10px auto;
}
    </style>
   
    <div style="position:relative;z-index:4;">
        <div style="float:left;line-height:46px;margin-right:20px;">情绪诱导 <img style="width:15px;height:15px;" src="/Images/Home/down.png" id="shang" alt=""></div>
        <ul class="yyui_menu1">
            <li>
                <a href="#">视频观看</a>
                <ul class="one"></ul>
            </li>
        </ul>
        <div id="video-list">
        </div>
        <div class="videoBox">
            <div id="schemeVideo">
                <div class="closeVideo">×</div>
                <div class="videoSrc" style="height:630px;width:100%;"></div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            yyui_menu('.yyui_menu1');
            var audioList = [
                  {
                      name: '动感视频', childList: [
                        { name: '01-动感视频', id: 'BEA5628A2DB829889C33DC5901307461' },
                        { name: '02-动感视频', id: '0F86A83FF08BA0C89C33DC5901307461' },
                        { name: '03-动感视频', id: '43BF9941843F20199C33DC5901307461' }]
                  },
                {
                    name: '情绪诱导', childList: [
                      { name: '01-情绪诱导', id: '75D38BA441D0A3979C33DC5901307461' },
                      { name: '02-情绪诱导', id: '830056F21AAD7E839C33DC5901307461' },
                      { name: '03-情绪诱导', id: '432EA84BE17ACB589C33DC5901307461' },
                      { name: '04-情绪诱导', id: '432EA84BE17ACB589C33DC5901307461' },
                      { name: '05-情绪诱导', id: '636F4A919D6DCA789C33DC5901307461' },
                      { name: '06-情绪诱导', id: '078E21E451D841569C33DC5901307461' },
                      { name: '07-动感视频', id: '563073A4FC8A46879C33DC5901307461' }
                    ]
                },
                {
                    name: '涟漪耀斑', childList: [
                      { name: '21-涟漪耀斑', id: '0206E8A66B4525F09C33DC5901307461' },
                      { name: '22-涟漪耀斑', id: '9FBC152310CD811D9C33DC5901307461' },
                      { name: '23-涟漪耀斑', id: '6DC4E68B45393CD89C33DC5901307461' }]
                },
                { name: '模糊色彩', childList: [{ name: '01-模糊色彩', id: 'F218A0AE059E5A059C33DC5901307461' }] },
                {
                    name: '发光物体', childList: [
                      { name: '01-发光物体', id: 'C82EE1C29077399A9C33DC5901307461' },
                      { name: '02-发光物体', id: '87D550AE00EFE9599C33DC5901307461' },
                      { name: '03-发光物体', id: '8652CA4F3DCEBD899C33DC5901307461' },
                      { name: '04-发光物体', id: 'F36EAFE6088FBE229C33DC5901307461' }
                    ]
                },
                { name: '无声', childList: [
                    { name: '01-Floating Balls', id: 'D5B668C8588E87B39C33DC5901307461' },
                      { name: '02-Computunnel', id: '71D251E31F9B097A9C33DC5901307461' },
                      { name: '03-Concentric', id: 'D8FAEF83BEFD43FD9C33DC5901307461' },
                      { name: '04-Smoke', id: 'A59975584C99B19D9C33DC5901307461' },
                       { name: '05-涟漪耀斑', id: '12FCDDFA09E4A3EF9C33DC5901307461' },
                      { name: '06-模糊色彩', id: 'CAC48B0DCD23226F9C33DC5901307461' },
                      { name: '07-中国国旗', id: '0CC8366C76DB02039C33DC5901307461' },
                      { name: '08-黑白方旗', id: 'B6C505A9584C84329C33DC5901307461' },
                      { name: '09-美国国旗', id: 'F6D680E17174C8F79C33DC5901307461' },
                      { name: '10-条纹旗加五星', id: '7E41D3791D5C0C249C33DC5901307461' },
                      { name: '11-红白条纹旗', id: '937D937F2DAF848F9C33DC5901307461' }, ]
                },
            ]
            var strHtml = '';
            $('.one').empty();
            for (var i = 0; i < audioList.length; i++) {
                strHtml += ' <li>'
                strHtml += ' <a href="#" class="more">'+audioList[i].name+'</a>'
                if(audioList[i].childList){
                    strHtml += '<ul class="two" style="width:220px;">'
                    for(var j =0;j<audioList[i].childList.length;j++){
                        strHtml += '<li class="audioName"><a href="#" >' + audioList[i].childList[j].name + '</a><div class="playAudio" vid = "' + audioList[i].childList[j].id+ '">播放</div></li>'
                    }
                    strHtml += '</ul>'
                }
               strHtml += '</li>'
            }
            $('.one').append(strHtml)
            //选项卡tab
            $(".yyui_tab_title , .yyui_tab_title_this ").click(function () {
                $(this).siblings('li').attr('class', 'yyui_tab_title');
                $(this).attr('class', 'yyui_tab_title_this');
                //alert($(this).index()); 选项卡序号编号从0开始
                $(this).parent().siblings('div').attr('class', 'yyui_tab_content');
                $(this).parent().siblings('div').eq($(this).index()).attr('class', 'yyui_tab_content_this');
            });
            $('.playAudio').on('click', function () {
                $('.one').hide()
                var vid = $(this).attr('vid');
                $('.videoSrc').empty();
                var players = {}
                createPlayerList();
                function createPlayerList() {
                    let elems = document.getElementsByClassName('videoSrc');
                    let player = window.createCCH5Player({
                        vid: 'A4F81E6E8DD693A59C33DC5901307461',
                        siteid: "2661F9756E5C832E",
                        autoStart: true,
                        width: "100%",
                        height: "630px",
                        parentNode: elems[0]
                    });
                    players[vid] = player
                    $('.videoBox').show();
                    $('.closeVideo').click(function () {
                        $('.videoSrc').empty();
                        $('.videoBox').hide()
                        $('.isVideoBox').show();
                    })
                }

            })
        });
        function yyui_menu(ulclass) {
            $(document).ready(function () {
                $(ulclass + ' li').hover(function () {
                    $(this).children("ul").show(); //mouseover
                }, function () {
                    $(this).children("ul").hide(); //mouseout
                });
            });
        }
     

    </script>
    <script src="https://p.bokecc.com/player?siteid=CF79A0C69241530A&newversion=true"></script>
</body>
</html>
